// 文本溢出省略
@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// 毛玻璃效果
@mixin glass-effect($opacity: 0.8, $blur: 10px) {
  background: rgba(255, 255, 255, $opacity);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
}

// 渐变文本
@mixin gradient-text($start-color, $end-color) {
  background: linear-gradient(to right, $start-color, $end-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

// 卡片阴影
@mixin card-shadow($level: 1) {
  @if $level == 1 {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  } @else if $level == 2 {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  } @else if $level == 3 {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

// 添加响应式断点 mixin
@mixin respond-to($breakpoint) {
  @if $breakpoint == 'xl' {
    @media (max-width: 1400px) {
      @content;
    }
  }
  @if $breakpoint == 'lg' {
    @media (max-width: 1200px) {
      @content;
    }
  }
  @if $breakpoint == 'md' {
    @media (max-width: 992px) {
      @content;
    }
  }
  @if $breakpoint == 'sm' {
    @media (max-width: 768px) {
      @content;
    }
  }
  @if $breakpoint == 'xs' {
    @media (max-width: 576px) {
      @content;
    }
  }
}

// 渐变背景
@mixin gradient-bg(
  $direction: 135deg,
  $start-color: var(--primary-color),
  $end-color: var(--primary-color-light)
) {
  background: linear-gradient($direction, $start-color, $end-color);
}

// 玻璃拟态效果
@mixin glassmorphism($bg-opacity: 0.1, $blur: 10px, $border-opacity: 0.1) {
  background: rgba(255, 255, 255, $bg-opacity);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  border: 1px solid rgba(255, 255, 255, $border-opacity);
}

// 浮动效果
@mixin float-effect {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
}

// 通用卡片基础样式
@mixin card-base {
  background-color: var(--bg-color-soft);
  border-radius: var(--radius-large);
  border: 1px solid var(--border-color-light);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-small);
}

// 通用卡片头部样式
@mixin card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);

  i {
    font-size: 1.25rem;
    color: var(--primary-color);
  }
}

// 隐藏滚动条
@mixin hide-scrollbar {
  // for Firefox
  scrollbar-width: none;
  // for IE, Edge
  -ms-overflow-style: none;
  // for Chrome, Safari, Opera
  &::-webkit-scrollbar {
    display: none;
  }
}
